<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>
        HIUI 前端页面框架 - 导航组件
    </title>
    <meta content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0 " name="viewport">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <link rel="stylesheet" type="text/css" href="../../styles/hiui.css">
    <link rel="stylesheet" type="text/css" href="../../styles/site.css">

<body>
    <% var navName = 'form'; %>
    <%- include('../_parts/_header') %>
    <div class="site-container">
        <div class="site-tree">
            <%- include('../_parts/_nav') %>
        </div>
        <div class="site-content">
            <h3 class="site-title">Menu 导航菜单<a href="#normalize">#</a></h3>
            <h4 class="site-subtitle">1. 基础导航</h4>
            <div class="site-info">
                <p>默认导航</p>
                <ul class="nav" style="width: 200px;">
                    <li class="nav-item active">
                        <a href="javascript:;" class="nav-link">一级导航</a>
                    </li>
                    <li class="nav-item">
                        <a href="javascript:;" class="nav-link">一级导航</a>
                        <ul class="nav" style="width: 200px;">
                            <li class="nav-item">
                                <a href="javascript:;" class="nav-link">二级导航</a>
                            </li>
                            <li class="nav-item">
                                <a href="javascript:;" class="nav-link">二级导航</a>
                            </li>
                            <li class="nav-divider"></li>
                            <li class="nav-item">
                                <a href="javascript:;" class="nav-link">二级导航</a>
                            </li>
                            <li class="nav-item disabled">
                                <a href="javascript:;" class="nav-link">禁用二级导航</a>
                            </li>
                        </ul>
                    </li>
                    <li class="nav-divider"></li>
                    <li class="nav-item">
                        <a href="javascript:;" class="nav-link">一级导航</a>
                    </li>
                    <li class="nav-item disabled">
                        <a href="javascript:;" class="nav-link">禁用一级导航</a>
                    </li>
                </ul>
                <p>横向导航</p>
                <ul class="nav nav-inline">
                    <li class="nav-item active">
                        <a href="javascript:;" class="nav-link">导航</a>
                    </li>
                    <li class="nav-item">
                        <a href="javascript:;" class="nav-link">导航</a>
                    </li>
                    <li class="nav-divider"></li>
                    <li class="nav-item">
                        <a href="javascript:;" class="nav-link">导航</a>
                    </li>
                    <li class="nav-item disabled">
                        <a href="javascript:;" class="nav-link">禁用导航</a>
                    </li>
                </ul>
            </div>
            <h3 class="site-title">Tab 标签页<a href="#tab">#</a></h3>
            <div class="site-info">
                <p>基本用法</p>
                <div class="tab">
                    <ul class="nav nav-tab" role="tablist">
                        <li role="presentation" class="nav-item active">
                            <a class="nav-link" href="javascript:;" aria-controls="detail" role="tab" data-toggle="tab">标签一</a>
                        </li>
                        <li role="presentation" class="nav-item">
                            <a class="nav-link" href="javascript:;" aria-controls="identify" role="tab" data-toggle="tab">标签二</a>
                        </li>
                        <li role="presentation" class="nav-item">
                            <a class="nav-link" href="javascript:;" aria-controls="security" role="tab" data-toggle="tab">标签三</a>
                        </li>
                    </ul>
                    <div class="tab-content">
                        <div role="tabpanel" class="tab-pane active" id="detail">
                            标签一内容
                        </div>
                        <div role="tabpanel" class="tab-pane" id="identify">
                            标签二内容
                        </div>
                        <div role="tabpanel" class="tab-pane" id="security">
                            标签三内容
                        </div>
                    </div>
                </div>
                <p>选项卡</p>
                <div class="tab tab-card">
                    <ul class="nav nav-tab" role="tablist">
                        <li role="presentation" class="nav-item active">
                            <a class="nav-link" href="javascript:;" aria-controls="detail" role="tab" data-toggle="tab">标签一</a>
                        </li>
                        <li role="presentation" class="nav-item">
                            <a class="nav-link" href="javascript:;" aria-controls="identify" role="tab" data-toggle="tab">标签二</a>
                        </li>
                        <li role="presentation" class="nav-item">
                            <a class="nav-link" href="javascript:;" aria-controls="security" role="tab" data-toggle="tab">标签三</a>
                        </li>
                    </ul>
                    <div class="tab-content">
                        <div role="tabpanel" class="tab-pane active" id="detail">
                            标签一内容
                        </div>
                        <div role="tabpanel" class="tab-pane" id="identify">
                            标签二内容
                        </div>
                        <div role="tabpanel" class="tab-pane" id="security">
                            标签三内容
                        </div>
                    </div>
                </div>
                <p>卡片化</p>
                <div class="tab tab-border">
                    <ul class="nav nav-tab" role="tablist">
                        <li role="presentation" class="nav-item active">
                            <a class="nav-link" href="javascript:;" aria-controls="detail" role="tab" data-toggle="tab">标签一</a>
                        </li>
                        <li role="presentation" class="nav-item">
                            <a class="nav-link" href="javascript:;" aria-controls="identify" role="tab" data-toggle="tab">标签二</a>
                        </li>
                        <li role="presentation" class="nav-item">
                            <a class="nav-link" href="javascript:;" aria-controls="security" role="tab" data-toggle="tab">标签三</a>
                        </li>
                    </ul>
                    <div class="tab-content">
                        <div role="tabpanel" class="tab-pane active" id="detail">
                            标签一内容
                        </div>
                        <div role="tabpanel" class="tab-pane" id="identify">
                            标签二内容
                        </div>
                        <div role="tabpanel" class="tab-pane" id="security">
                            标签三内容
                        </div>
                    </div>
                </div>
            </div>
            <h3 class="site-title">Dropdown 下拉菜单<a href="#breadcrumb">#</a></h3>
            <div class="site-info">
            </div>
            <h3 class="site-title">Breadcrumb 面包屑<a href="#breadcrumb">#</a></h3>
            <div class="site-info">
                <p>基本使用</p>
                <ol class="breadcrumb">
                    <li>
                        <a href="javascript:;">首页</a>
                    </li>
                    <li>
                        <a href="javascript:;">分类</a>
                    </li>
                    <li class="active">内容</li>
                </ol>
            </div>
            <h3 class="site-title">Aside 左右模态框<a href="#breadcrumb">#</a></h3>
            <div class="site-info">
            </div>
        </div>
    </div>
    <script type="text/javascript" src="../../scripts/vendor.js"></script>
    <script type="text/javascript" src="../../scripts/site.js"></script>
</body>

</html>